<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="searchName"
      />
      <button @click="getName">Search</button>
    </div>
  </section>
</template>

<script>
import axios from "axios";
export default {
  name: "Search",
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    async getName() {
      let searchName = this.searchName.trim();
      // 判断输入的值不能为空
      if (!searchName) {
        alert("请输入用户名！");
        return;
      }
      // 修改loading,
      this.$bus.$emit("isLoading", true);
      // 发送数据请求
      let res = await axios({
        method: "GET",
        url: "https://api.github.com/search/users",
        params: {
          q: searchName,
        },
      });
      // console.log(res.data.items);
      let { items } = res.data;
      console.log(items);

      // 修改loading状态
      this.$bus.$emit("isLoading", false);
      let newList = items.map((user) => {
        return {
          id: user.id,
          login: user.login,
          html_url: user.html_url,
          avatar_url: user.avatar_url,
        };
      });
      this.$bus.$emit("setList", newList);
    },
  },
};
</script>

<style>
</style>